<template>
    <div style="height: 100%; position: relative">
        <div style="position: relative">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                    :key="item.name"
                    v-for="item in tabs"
                    :label="item.label"
                    :name="item.name"
                >
                    <component
						v-if="activeName===item.name"
                        v-bind:is="item.component"
                        :meta="item.meta"
                        @addtab="addTab"
                        @removetab="removeTab"
                    ></component>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- <el-button @click="showStoreBox=true">显示弹窗</el-button>
        <store-list :showStoreBox.sync="showStoreBox" @chooseStore="getStoreInfo"></store-list>-->
        <!-- <router-view></router-view> -->
    </div>
</template>
<script>
import storeList from "@/components/home/store-list.vue"
// console.log('storeList',storeList)
export default {
    data() {
        return {
            activeName: 'order-list',
            tabs: [
                /* { label: '商品列表', name: 'order-list', component: () => import('./order-list.vue') }, */
            ],
            showStoreBox: false
        };
    },
    components: { storeList },
    created() {
        this.tabs = this.$route.meta.tabs;
    },
    methods: {
        getStoreInfo(store) {
            console.log(store);
        },
        addTab(label, name, component) {
            this.tabs.push({ label, name, component });
            this.activeName = name;
        },
        removeTab(targetName) {
            let tabs = this.tabs;
            let activeName = this.activeName;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.activeName = activeName;
            this.tabs = tabs.filter(tab => tab.name !== targetName);
        },
        handleClick(tab, event) {
            // console.log(tab, event);
            /* this.activeName = tab.name;
            if (tab.index === "0") {
                this.tabs = [{ label: '积分订单', name: 'order-list', component: () => import('./order-list.vue') }]
            } */
        }
    }
};
</script>
<style lang="scss" scoped>
/* .admin-control-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/deep/.el-drawer__body{
	overflow: auto;
	padding-bottom: 65px;
}
.demo-drawer__footer{
	position: absolute;
	bottom: 16px;
	left: 16px;
} */
</style>